<template>
	<div class="ml-auto">
		<n-popover
			trigger="click"
			placement="bottom-end"
			:show="showProvider"
			style="padding: 0"
			:show-arrow="false"
			@update:show="handleUpdateShow">
			<template #trigger>
				<div
					class="mr-[10px] h-[40px] p-4 rounded-lg bg-bg-3 flex items-center app-bg-react text-t-2">
					{{ $t('action.filter') }}
					<base-icon
						name="down"
						size="16"
						color="var(--color-text-3)"
						class="ml-2 duration-300"
						:class="{ 'rotate-180': showProvider }" />
				</div>
			</template>
			<div class="w-[200px] max-h-[500px] rounded-lg overflow-auto flex flex-col">
				<div class="p-4 w-64 bg-gray-800 text-white">
					<n-checkbox-group v-model:value="checkedValues">
						<div class="flex justify-between items-center mb-4">
							<n-button
								@click="clearSelection"
								class="w-full rounded-lg bg-bg-3 app-bg-react"
								color="transparent"
								text-color="white">
								{{ $t('action.clear') }}
							</n-button>
						</div>
						<!-- 使用唯一的 key 来优化 v-for 渲染 -->
						<div v-for="item in list" :key="item.id" class="flex justify-between items-center mb-2">
							<n-checkbox
								class="w-full"
								:value="item.id"
								:theme-overrides="{
									colorChecked: '#1E3A8A',
									checkMarkColor: 'white'
								}">
								{{ item.developerName }}
							</n-checkbox>
							<div class="text-right whitespace-nowrap">{{ item.count }}</div>
						</div>
					</n-checkbox-group>
				</div>
			</div>
		</n-popover>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch, defineEmits } from 'vue'
import { BaseIcon } from '@/components/base'
import { NPopover, NCheckbox, NCheckboxGroup, NButton } from 'naive-ui'
import { useRequest } from '@/hooks'
import { getProviderListByGameTagId, getGameTagBySlug } from '@/api/other'

const props = defineProps({
	tagData: {
		type: Object,
		default: () => ({
			id: '',
			gameTagGroupId: ''
		})
	},
	type: {
		type: String as any,
		default: ''
	}
})
const emit = defineEmits(['update-checked-values'])
// 列表项数据
const list: any = ref([])
// 控制 "所有提供商" 弹出框的显示状态
const showProvider = ref(false)
// 存储选中的复选框值
const checkedValues = ref<string[]>([])

const getAPI = () => {
	if (props.type === 'providerBySlug') {
		return getGameTagBySlug
	} else {
		return getProviderListByGameTagId
	}
}
const { run, data } = useRequest<any>(getAPI())

const getProviderList = async () => {
	await run({
		tagSlug: props.tagData.id
	})

	if (props.type === 'providerBySlug') {
		let result = <any>[]
		data.value.forEach((element: { tagSlug: any; gameTagName: any }) => {
			let obj = {
				...element,
				id: element.tagSlug,
				developerName: element.gameTagName
			}
			result.push(obj)
		})
		list.value = result
	} else {
		list.value = data.value
	}

	// console.log(data.value)
	// console.log(props.tagData.id)
}

// 更新 "所有提供商" 弹出框的显示状态
const handleUpdateShow = (val: boolean) => {
	showProvider.value = val
}

// 清除所有选中的复选框
const clearSelection = () => {
	checkedValues.value = []
	emit('update-checked-values', checkedValues.value)
}
watch(checkedValues, (newValues) => {
	emit('update-checked-values', newValues)
})
onMounted(() => {
	getProviderList()
})

watch(
	() => props.tagData,
	() => {
		if (props.tagData.id) {
			getProviderList()
		} else {
			list.value = []
		}
		clearSelection()
	}
)
</script>
